<script setup lang="ts">
interface ButtonProps {
  type?: "deep" | "light";
  disabled?: boolean;
  width?: string;
  height?: string;
  margin?: string;
  labelColor?: string;
  backgroundColor?: string;
  borderRadius?: string;
}

const emit = defineEmits(["click"]);
const props = withDefaults(defineProps<ButtonProps>(), {
  width: "295px",
  height: "48px",
  disabled: false,
  type: "deep",
  labelColor: "var(--color-btn-text)",
  margin: "0 auto",
  backgroundColor: "",
  borderRadius: "100rpx"
});

const onClick = () => {
  if (props.disabled) {
    return;
  }
  console.log(1);
  emit("click");
};
</script>

<template>
  <view
    :class="['btn', type]"
    :style="{
      width,
      height,
      color: labelColor,
      margin,
      background: backgroundColor,
      borderRadius
    }"
    @click.stop="onClick"
  >
    <slot />
  </view>
</template>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;

  &.deep {
    background: var(--btn-bg-color);
  }
  &.light {
    background: var(--btn-bg-color);
  }
  &.other {
    background: var(--btn-bg-color-other);
  }
}
</style>
